{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
<!-- <link rel="stylesheet" href="/static/plugin/UploadFive/uploadifive.css"> -->
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
    <div class="page__bd">
        <div class="weui-wepay-pay">
            <form class="weui-wepay-pay__bd" id="ajaxForm">
                <div class="weui-wepay-pay__inner">
                    <h1 class="weui-wepay-pay__title">充值虚拟币</h1>
                    <div class="weui-wepay-pay__inputs"> <strong class="weui-wepay-pay__strong">￥</strong>
                    <input type="number" name="money" class="weui-wepay-pay__input" placeholder="请输入金额"></div>
                    <div class="weui-wepay-pay__intro">请转账到以下银行账号，并提交转账截图！<br>开户行：交通银行吉林东大支行<br>开户姓名：姜亚丽<br>开户账号：6222 6003 5000 3771 216 <br>支付宝：13596210685 <br><span class="weui-wepay-color-red">（打款明细截图必须是带有流水号的）</span></div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <div class="weui-uploader">
                                <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title">*添加支付截图信息（限一张）</p>
                                    <div class="weui-uploader__info"><input type="hidden" name="pic"></div>
                                </div>
                                <div class="weui-uploader__bd">
                                    <ul class="weui-uploader__files" id="uploaderFiles">
                                    </ul>
                                    <div class="weui-uploader__input-box">
                                        <input id="fileupload" type="file">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="weui-wepay-pay__ft">
                <!-- <p class="weui-wepay-pay__info">支付金额给商户</p> -->
                <div class="weui-wepay-pay__btn">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" id="showToast">提交申请</a>
                </div>
            </div>
        </div>

    </div>
    <div class="page__ft">
        <div class="weui-footer weui-footer_fixed-bottom">
            <p class="weui-footer__links">
                <a href="javascript:void(0);" class="weui-footer__link">米粒生活</a>
            </p>
            <p class="weui-footer__text">Copyright © 2008-2018 mlilife.com</p>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script src="/static/plugin/UploadFive/jquery.uploadifive.min.js"></script>
<script type="text/javascript">
    // 支付截图上传图片
    $('#fileupload').uploadifive({
        'width'        : 77,
        'height'       : 77,
        'buttonClass'  : 'weui-uploader__input-box',
        'buttonText'   : '',
        'queueID'      : 'uploaderFiles',
        'itemTemplate' : '<li class="weui-uploader__file uploadifive-queue-item weui-uploader__file_status"><div class="weui-uploader__file-content close"></div></li>',
        'auto'         : true, //自动上传
        'fileObjName'  : 'image',
        'fileSizeLimit': 10240,
        'fileType'     : 'image/*',
        'method'       : 'post',
        'formData'     : {'someKey' : 'someValue'},
        'uploadScript' : '/api/v1/tools/upload',
        'multi'        : false,
        'overrideEvents' : ['onProgress'],
        'queueSizeLimit' : 1,
        'removeCompleted' : false,  //删除已上传的队列
        'simUploadLimit' : 0,   //同时上传的文件数
        'truncateLength' : 5,   //截断队列中文件名的字符数
        'uploadLimit'  : 0, //可以上传的最大文件数
        'onInit'       : function() {
            console.log('onInit:将文件添加到队列中开始上传.');
        },
        'onAddQueueItem' : function(file) {
            console.log('onAddQueueItem:文件 ' + file.name + ' 被添加到队列中!');
        },
        'onError'      : function(errorType) {
            file.queueItem.find('.weui-uploader__file-content').html('<i class="weui-icon-warn"></i>');
            $.toptip(errorType, 'error');
        },
        'onUpload'     : function(filesToUpload) {
            console.log("onUpload:"+filesToUpload + ' 个文件将被上传.');
        },
        'onSelect' : function(queue) {
            console.log("onSelect:"+queue.queued + ' 文件被添加到队列中.');
        },
        'onProgress'   : function(file, e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
            }
            file.queueItem.find('.weui-uploader__file-content').html(percent + '%');
        },
        'onUploadComplete' : function(file, data) {
            var _json= JSON.parse(data);
            $("input[name=pic]").val(_json.data.url);
            file.queueItem.css("background-image","url("+_json.data.url+")");
        },
        'onQueueComplete' : function(uploads) {
            console.log("共有"+uploads.successful + ' 个文件上传成功.');
            file.queueItem.find('.weui-uploader__file-content').html('<i class="weui-icon-cancel"></i>');

        },
        'onCancel'     : function() {
            console.log('文件 ' + file.name + ' 被取消!');
            $("input[name=pic]").val("");
        },
        'onCheck'      : function(file, exists) {
            if (exists) {
                console.log('文件 ' + file.name + ' 服务器上已存在');
            }
        },
        'onFallback'   : function() {
            alert('Oops!  You have to use the non-HTML5 file uploader.');
        }
    });

    // 提交
    $("#showToast").click(function(event) {
        /* Act on the event */
        var options={
            url:"/api/v1/member/recharge",
            type:"POST",
            dataType:"json",
            success: function(json){

                if(json.returnCode==1){
                    $.toast("提交成功", function() {
                        window.location.href = "{:url('Index/recharge_list')}";
                    });
                }else{
                    $.toptip(json.returnMsg, 'error');
                }
            }
        };
        $("#ajaxForm").ajaxSubmit(options)
    });


//重置浏览器回退链接
browserBack("assets.html");
</script>
{/block}